<template>
	<view class="login-page">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="tips">欢迎回来！</view>
		<view class="login-form">
			<u-field v-model="mobile" label="手机号" placeholder="请输入手机号"></u-field>
			<u-field v-if="isPassword" v-model="password" label="密码" :password="!showPwd" :right-icon="passIcon"
			 @right-icon-click="changePwdIsShow" placeholder="请输入密码"></u-field>
			<u-field v-else v-model="code" label="验证码" placeholder="请输入验证码">
				<u-button size="mini" slot="right" type="success" :ripple="true" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<view class="more-login">
			<view class="left" @click="changeLoginType">
				{{isPassword ? '短信登录' : '密码登录'}}
			</view>
		</view>
		<view class="login-btn-wrap">
			<u-button type="success" shape="circle" :ripple="true" @click="login">登录</u-button>
		</view>
		<view class="wechat-login">
			<view class="title-wrap">
				<u-line length="150rpx" color="#999" />
				<text class="text">快捷登录</text>
				<u-line length="150rpx" color="#999" />
			</view>
			<view class="login-type-list">
				<view class="item" @click="wxLogin">
					<u-icon name="weixin-circle-fill" size="100" color="#1dd96a"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import User from '@/model/user.js'
	import {
		CODE_LEN
	} from '@/common/const.js'
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				password: '',
				codeText: '',
				isPassword: false,
				showPwd: false
			}
		},
		computed: {
			passIcon() {
				return this.showPwd ? 'eye-fill' : 'eye-off'
			}
		},
		methods: {
			changeLoginType() {
				this.isPassword = !this.isPassword
			},
			async getCode() {
				if (!this.$u.test.mobile(this.mobile)) {
					this.$u.toast('请输入正确的手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					const { code } = await User.getCode({
						mobile: this.mobile
					})
					this.$refs.uTips.show({
						title: code,
						type: 'success',
						duration: '5000'
					})
					this.$refs.uCode.start();
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeText = text
			},
			changePwdIsShow() {
				console.log(this.showPwd)
				this.showPwd = !this.showPwd
			},
			// 微信快捷登录
			wxLogin() {
				this.$u.toast('敬请期待')
			},
			async login() {
				
				this.checkParams()
				if (this.isPassword) {
					await this.$store.dispatch('user/login',{
						username: this.mobile,
						password: this.password
					})
				} else {
					await this.$store.dispatch('user/codeLogin',{
						mobile: this.mobile,
						code: this.code
					})
				}
				this.$u.toast('登录成功')
				// TODO 获取用户信息
				await this.$store.dispatch('user/getUserInfo')
				uni.navigateBack({
					delta: 1
				})
				
			},
			checkParams() {
				if (!this.$u.test.mobile(this.mobile)) {
					this.$u.toast('请输入正确的手机号');
					return
				}
				if (!this.isPassword && !this.$u.test.code(this.code, CODE_LEN)) {
					this.$u.toast(`验证码必须是${CODE_LEN}位数字`);
					return
				}
				if (this.isPassword && this.password.length < 6) {
					this.$u.toast('密码必须大于6位');
					return
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		background: #FFFFFF;
		height: 100%;
		padding: 40rpx;

		.tips {
			padding-top: 100rpx;
			font-size: 32rpx;
			color: #333333;
		}

		.login-form {
			margin-top: 100rpx;
		}

		.more-login {
			padding: 40rpx;
			color: #999999;
			font-size: 24rpx;
		}

		.login-btn-wrap {
			padding: 40rpx;

			.login-btn {}
		}

		.wechat-login {
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;

			.title-wrap {
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 40rpx;
				}
			}
		}

		.login-type-list {
			padding: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
